<template>
	<div class="container">
		<div class="mgb20">
			<span class="label">角色：</span>
			<el-select v-model="role" @change="getPermission">
				<el-option v-for="item in roleSet" :key="item.roleId" :label="item.roleName" :value="item.roleId"></el-option>
			</el-select>
		</div>
		<div class="mgb20 tree-wrapper">
			<el-tree
				ref="tree"
				:data="permissionSet"
				node-key="id"
				default-expand-all
				show-checkbox
				:default-checked-keys="checkedKeys"
			/>
		</div>
		<el-button type="primary" @click="onSubmit">保存权限</el-button>
	</div>
</template>

<script setup lang="ts" name="permission">
import {onMounted, ref} from 'vue';
import { ElTree } from 'element-plus';
import { usePermissStore } from '../store/permiss';
import API from "../utils/axios";
import {rejects} from "assert";

const role = ref<string>('');
// 角色信息结果集
const roleSet = ref([])
// 权限信息结果集
const permissionSet = ref([])
const childSet = ref([])
// 使用回调函数 onMounted在访问该页面时请求角色数据
onMounted(() => {
	// 请求角色信息
	const getRoleInfo = () => {
		try {
			API.post('/RoleController/searchAllRole')
					.then((res) => {
						roleSet.value = res.data.data.map((item : any) => {
							return {roleId: item.roleId, roleName: item.roleName}
						});
						console.log(roleSet.value);
					})
					.catch((err) => {return err})
		} catch (error) {
			console.error('角色请求失败:', error)
		}
	};

	// 请求权限信息
	const getPermissionInfo = () => {
		try {
			API.post('/PermissionController/searchAllPermission')
					.then((res) => {
						permissionSet.value = res.data.data.map((item : any) => {
							return { id : item.permissionId, label : item.permissionName ,
								children: item.childRouter.map((child : any) => {
									return {
										id: child.permissionId,
										label: child.permissionName
									}
								})}
						});
						console.log(permissionSet.value);
					})
					.catch((err) => {return err})
		} catch (error) {
			console.error('权限请求失败:', error)
		}
	}

	// 使用async函数异步获取数据
	(async () => {
		try {
			await getRoleInfo();
			await getPermissionInfo();
		} catch (error) {
			console.error(error);
		}
	})()
})

const permiss = usePermissStore();

// 获取当前权限
const checkedKeys = ref([]);
const getPermission = () => {
	tree.value?.setCheckedKeys([]);
	const formData=new FormData();
	formData.append('roleId',role.value);
  API.post("/PermissionController/searchRolePermission", formData)
			.then((res) => {
				checkedKeys.value = res.data.data;
			})
			.catch((err) => {return err})
}

// 保存权限
const tree = ref<InstanceType<typeof ElTree>>();
const onSubmit = () => {
	// 获取选中的权限
	const roleId = role.value; // 获取角色ID
	// 获取选项ID
	const permissionSet = tree.value?.getCheckedKeys();
	console.log("角色ID:", roleId);
	console.log("权限ID:", permissionSet)
	// 角色权限数据
	const rolePermission = {
		roleId : roleId,
		permissionIdSet : permissionSet
	}
	API.post("/RoleController/addRolePermission", rolePermission)
			.then((res) => {
				alert("保存成功!");
			})
			.catch((err) => {return err});
};
const handleChange = (val: string[]) => {
	tree.value!.setCheckedKeys(permiss.defaultList[role.value]);
};
</script>

<style scoped>
.tree-wrapper {
	max-width: 500px;
}
.label {
	font-size: 14px;
}
</style>
